<template>
  <div class="main ad-manage-list">
    <section>
      <el-form :model="formData" label-width="100px" ref="formData">
        <el-form-item label="种草素材：" :rules="commonRules.notNullRule">
          <div class="grass-box" v-for="(item, index) in list" :key="index">
            <div>
              <span>{{item.title}}</span>
              <i v-show="item.title" class="el-icon-circle-close red-close" @click="item.title='';item.id=''"></i>
            </div>
            <el-button type="primary" plain @click="chooseGrass(index)">请选择</el-button>
          </div>
        </el-form-item>
        <el-form-item label="起止时间：" :rules="commonRules.notNullRule" prop="dateTimeRange">
          <el-date-picker 
              v-model="formData.dateTimeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item v-if="rightsButtons['save']">
          <el-button type="success" :loading="btnLoading" @click="save('formData')">保存</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
    export default {
      name: "homeGrass",
      data() {
        return {
          list: [
            {
              title: '',
              id: ''
            },
            {
              title: '',
              id: ''
            },
            {
              title: '',
              id: ''
            }
          ],
          formData: {
            dateTimeRange: [],
            ids: [],
            startTime: '',
            endTime: ''
          },
          btnLoading: false
        }
      },
      created () {
        this.initDetail()
      },
      methods: {
        //  获取内容
        initDetail () {
          this.request({
            url: '/bus-material/zhong-cao-recommend',
            method: 'get'
          }).then(({data}) => {
            this.$set(this.formData, 'dateTimeRange', [data[0].recommendStartTime?data[0].recommendStartTime:'', data[0].recommendEndTime?data[0].recommendEndTime:''])
            if (data) this.list = []
            data.map((item) => {
              this.list.push({
                title: item.title,
                id: item.id,
                type: item.type,
                groupName: item.groupName,
                tagName: item.tagName
              })
            })
            if (this.list.length !== 3) {
              let len = 3 - this.list.length
              for (let i = 0; i < len; i++) {
                this.list.push({
                  title: '',
                  id: ''
                })
              }
            }
          }).catch(err => {
            console.log(err)
          })
        },
        // 选择素材
        chooseGrass (index) {
          let selected = []
          if (this.list[index].title) {
            selected = [this.list[index]]
          }
          this.grassChoose({ count: 1 }, selected).then(val => {
            for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].title === val[0].title) {
                this.$message.error('所选素材不能相同')
                return
              }
            }
            this.$set(this.list[index], 'title', val[0].title)
            this.$set(this.list[index], 'id', val[0].id)
            this.$set(this.list[index], 'type', val[0].type)
            this.$set(this.list[index], 'groupName', val[0].groupName)
            this.$set(this.list[index], 'tagName', val[0].tagName)
          })
        },
        // 提交内容
        save (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              let count = 0
              this.list.map((item) => {
                if (item.id) count++
              })
              if (count <= 0) {
                this.$message.error('种草素材至少需要选择一个')
                return
              }
              this.btnLoading = true
              this.formData.ids = []
              this.list.map((item) => {
                if (item.id) this.formData.ids.push(item.id)
              })
              this.request({
                url: '/bus-material/set-home-zhongcao',
                method: 'post',
                data: {
                  ...this.formData,
                  startTime: this.formData.dateTimeRange? this.formData.dateTimeRange[0] : '',
                  endTime: this.formData.dateTimeRange ? this.formData.dateTimeRange[1] : ''
                }
              }).then((res) => {
                if (res.code === 200) {
                  this.$message.success('保存成功')
                }
                this.btnLoading = false
              }).catch(err => {
                console.log(err)
                this.btnLoading = false
              })
            }
          })
        }
      },
    }
</script>

<style scoped>
.red-close {
  color: red;
  font-size: 18px;
  margin-right: 10px;
  cursor: pointer;
}
.grass-box {
  display: flex;
  margin-bottom: 10px;
}
</style>
